<template>
    <!-- <h3>歌曲分类</h3> -->
    <div class="page-toggle">
        <div @click="addSongCategoryFn" :class="['toggle-button', { active: num == 0 }]">发布分类</div>
        <span>|</span>
        <div @click="listSongCategoryFn" :class="['toggle-button', { active: num == 1 }]">分类列表</div>
    </div>

    <!-- 表单 -->
    <div class="category-form" v-if="num == 0">

        <div class="opt">
            <el-input v-model="input" style="width: 360px; height: 44px; font-size: 16px" placeholder="歌曲分类名称" />
        </div>
        <div class="opt">
            <el-input v-model="textaea" type="textarea" style="width: 360px; font-size: 16px" placeholder="描述" />
        </div>

        <div class="opt">
            <el-button @click="addCategoryFn" type="primary">点击发布</el-button>
        </div>
    </div>

    <!-- 表格 -->
    <div class="category-table" v-if="num == 1">
        <el-table :data="tableData" stripe style="width: 100%">
            <el-table-column prop="index" label="序号" width="90" />
            <el-table-column prop="category_name" label="分类名称" width="180" />
            <el-table-column prop="description" label="描述" width="180" />

            <el-table-column label="操作" align="right">
                <template #header>
                    <el-input style="width: 300px;" v-model="search" size="small" placeholder="搜索" />
                </template>
                <template #default="scope">
                    <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">
                        删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>

    <!-- 分页器 -->
    <div class="page" v-if="num == 1">
        <!-- :page-count="page" -->
        <el-pagination :page-size="pageSize" :pager-count="pageSize" layout="prev, pager, next" :total="totalNum"
            @change="changePageFn" />
    </div>
</template>


<script setup lang="ts">
import { ref, watch } from 'vue'
import { addSongCategory, removeSongCategory, itemsSongCategory, searchSongCategory } from '../../api/request'
import { ElMessage, ElMessageBox } from 'element-plus'
import type { Action } from 'element-plus'
const input = ref('')
const textaea = ref('')
const num = ref(1)
const addSongCategoryFn = () => num.value = 0
const listSongCategoryFn = () => num.value = 1
// 定义每一项数据的属性类型
type Item = {
    category_id: string
    category_name: string
    description: string
    index?: string | number
}
// 表格数据
const tableData = ref<any>([])

// 分类数量
let totalNum = ref(0)
let page = ref(1)
let pageSize = ref(9)
const search = ref('')
watch(search, async (value: any) => {
    if (value == "") {
        getCategoryListFn();
    }
    else {
        // console.log(value);
        await searchSongCategory({ keyword: value })
            .then(
                content => {
                    console.log(content)
                    let { code, result, total } = content;
                    if (code == 200) {
                        // 整合后台数据
                        let arr = result.map((item: Item, index: number) => {
                            item.index = index + 1;
                            return item;
                        })
                        tableData.value = arr;
                        totalNum.value = total || 0;
                        // console.log({total})
                    }
                }
            )
    }
})

// 添加歌曲分类
const addCategoryFn = async () => {
    let category_name = input.value;
    let description = textaea.value;
    if (category_name == '' || description == '') {
        ElMessage.error("缺少参数，请检查再提交");
        return false;
    }
    await addSongCategory({ category_name, description })
        .then(
            content => {
                // console.log(content)
                let { code, msg } = content;
                // 添加分类名称成功
                if (code == 200) {
                    ElMessage.success(msg);
                    // 重置表单
                    input.value = "";
                    textaea.value = "";
                  
                    // 重新获取列表
                    getCategoryListFn();

                    num.value = 1;
                }
                else {
                    ElMessage.error(msg)
                }
            }
        )
}

// 点击删除歌曲分类
const handleDelete = (index: number, row: any) => {
    // console.log(index, row)
    // 获取当前点击的选项
    let { category_id, category_name } = row;
    // console.log({category_id})
    ElMessageBox.confirm(
        `是否删除这个“${category_name}”歌曲分类?`,
        'Confirm',
        {
            distinguishCancelAndClose: true,
            confirmButtonText: '确定',
            cancelButtonText: '取消',
        }
    )
        .then(async () => {
            // console.log("点击确定")
            // 删除歌曲分类
            await removeSongCategory({ category_id })
                .then(
                    content => {
                        let { code, msg } = content;
                        if (code != 200) {
                            ElMessage.error(msg)
                        }
                    }
                )
                .catch(err=>console.log(err))

            // 删除程序中数组对应的数据
            tableData.value.splice(index, 1);
        })
        .catch((action: Action) => {
            // console.log("点击取消")
        })

}

// 获取歌曲分类列表
const getCategoryListFn = async (page = 1, pageSize = 10) => {
    await itemsSongCategory({ page, pageSize })
        .then(
            content => {
                // console.log(content)
                let { code, result, total } = content;
                console.log({total})
                if (code == 200) {
                    // 整合后台数据
                    let arr = result.map((item: Item, index: number) => {
                        item.index = index + 1;
                        return item;
                    })
                    tableData.value = arr;
                    totalNum.value = total || 0;
                }
            }
        )
}
// 点击分页时执行的函数
const changePageFn = (num: number) => {
    // console.log(value)
    page.value = num;
    getCategoryListFn(page.value, pageSize.value);
}
// 初始化
getCategoryListFn();

</script>

<style lang="scss">
@import '../../common/scss/common.scss';

.el-textarea__inner {
    height: 100px;
}

.category-form .opt {
    margin-top: 15px;
}

.category-table {
    margin-top: 15px;
}

.avatar-uploader-icon,
.el-upload-dragger,
.avatar-uploader,
.avatar {
    width: 178px;
    height: 178px;
    display: block;
    padding: 0 !important;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    text-align: center;
    padding: 0 !important;
    line-height: 178px;
}
</style>